import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
  PoweroffOutlined
} from '@ant-design/icons';
import { Layout, Menu, Popconfirm } from 'antd';
import React, { Suspense } from 'react';
import { Outlet } from 'react-router-dom';
import './layout.scss';
import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { setCollapsed, setMenuOpenKeys } from '@/store/menu';
import { setRouterUrl } from '@/store/route';

const { Header, Sider, Content } = Layout;
const LayoutContainter = () => {
  const dispatch = useDispatch();
  const navigate  = useNavigate();
  const collapsed = useSelector((state: {menu: {collapsed: boolean}}) => state.menu.collapsed);
  const menuOpenKeys = useSelector((state: {menu: {menuOpenKeys: string[]}}) => state.menu.menuOpenKeys);
  const path = useSelector((state: {route: {routerUrl: string}}) => state.route.routerUrl);
  const handleClickMenu = (item: { key: string }) => {
    console.log(item);
    navigate(item.key);
    dispatch(setRouterUrl(item.key));
  };
  const handleLoginOut = () => {
    navigate('login');
    localStorage.clear();
  };
  // useEffect(() => {
  //     dispatch(setRouterUrl(location.pathname.slice(1)))
  //     }, [navigate, path]);
  const onOpenChange = (keys: string[]) => {
    console.log(keys);
    // dispatch(setMenuOpenKeys(keys?.length > 1 ? [keys[keys.length - 1]] : keys));
    dispatch(setMenuOpenKeys(keys));
  };
  return (
    <Layout style={{ height: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          openKeys={menuOpenKeys}
          onClick={handleClickMenu}
          onOpenChange={onOpenChange}
          defaultSelectedKeys={[path]}
          items={[
            {
              key: 'page1',
              icon: <UserOutlined />,
              label: '页面1',
            },
            {
              key: 'page2',
              icon: <VideoCameraOutlined />,
              label: '页面2',
              children: [
                {
                  key: 'form',
                  icon: <UserOutlined />,
                  label: '表单',
                },
              ]
            },
            {
              key: 'page3',
              icon: <UploadOutlined />,
              label: '页面3',
              children: [
                {
                  key: 'table',
                  icon: <UserOutlined />,
                  label: '表格',
                },
              ]
            },
          ]}
          />
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }}>
          <div className='header'>
            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: () => dispatch(setCollapsed(!collapsed)),
            })}
            <div>
              <Popconfirm
                placement="bottomRight"
                title="确定要退出吗"
                onConfirm={handleLoginOut}
                okText="Yes"
                cancelText="No">
                <PoweroffOutlined style={{ color: '#fff' }} />
              </Popconfirm>
            </div>
          </div>
          
        </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: '16px 16px',
            minHeight: 280,
          }}
          >
          <Suspense fallback={<div>Loading..</div>}>
            <div style={{ background: '#fff', height: '100%' }}>

              <Outlet />
            </div>
          </Suspense>
        </Content>
      </Layout>
    </Layout>
  );
};
  
export default LayoutContainter;